<template>
  <div class="template-container" style="width:100%;">
    <el-form :inline="true" class="query-form" size="medium" label-width="90px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="fetchData" >查询</el-button>
            <el-button type="primary" @click="confirmCheck" >确认选择</el-button>
            <el-button @click="resetWrapper">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <vxe-grid
            border
            resizable
            ref="dataTable"
            :data="rows"
            :size="propSize || 'medium'"
            :style="propStyle"
            :height="propHeight || 550"
            :stripe="propStripe"
            :auto-resize="true"
            :pager-config="tablePage"
            @page-change="handlePageChange"
          >
            <vxe-table-column type="seq" width="50" align="center" fixed="left" />
            <vxe-table-column type="checkbox" width="50" align="center" fixed="left" />
            <vxe-table-column
              v-for="column in columns"
              :key="column.name"
              :field="column.name"
              :title="column.label"
              align="center"
              :width="column.width"
            >
              <template slot-scope="scope">
                <div v-if="strings.isBlank(column.dict)">{{ scope.row[column.name] }}</div>
                <div v-else v-html="utils.getDictLabel(scope.row[column.name], column.dict)" />
              </template>
            </vxe-table-column>
          </vxe-grid>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
        align: 'left',
        pageSizes: [10, 20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      suppliers: [],
      rows: [],
      columns: this.propColumns,
      selectedRows: [],
      query: {
        matrName: '',
        flowStatus: 'end',
        mergeId: '',
        supplierId: this.propSupplierId,
        flagOmoc: this.propOmoc
      },
      activeNames: 1
    }
  },
  props: {
    propColumns: {
      type: Array,
      required: false,
      default: () =>  [
        { label: '单据类型', name: 'useType', width: 200, dict: 'dept_use_type'},
        { label: '消耗单号',  name: 'useKey', width: 150},
        { label: '消耗日期',  name: 'useDate'},
        { label: '消耗仓库',  name: 'warehouseName', width: 100},
        { label: '科室',  name: 'deptName', width: 120},
        { label: '金额',  name: 'amount', width: 140},
      ]
    },
    propUrl: {
      type: String,
      default: () => '/dept/use/pageForMerge'
    },
    propHeight: {
      type: [String, Number],
      default: () => '550px'
    },
    propStyle: {
      type: String,
      default: () => 'width: 100%'
    },
    propStripe: {
      type: Boolean
    },
    propSize: {
      type: String
    },
    propSupplierId: {
      type: String
    },
    propOmoc: {
      type: Boolean,
      default: () => null
    },
    propConsignment: {
      type: Boolean,
      default: () => null
    }
  },
  mounted() {
    this.$ajax.get('/base/supplier/list').then(resp => {
      this.suppliers = resp.data
      this.fetchData()
    })
  },
  methods: {
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.fetchData()
    },
    async fetchData() {
      let wrapper = this.$newWrapper()

      if (this.strings.isNotBlank(this.query.matrName)) {
        wrapper.like('name', this.query.matrName)
      }

      if (this.strings.isNotBlank(this.query.flowStatus)) {
        wrapper.eq('flowStatus', this.query.flowStatus)
      }

      wrapper.eq('mergeId', this.query.mergeId)

      if (this.strings.isNotBlank(this.query.supplierId)) {
        wrapper.eq('supplierId', this.query.supplierId)
      }

      if (this.strings.isNotBlank(this.query.flagOmoc)) {
        wrapper.eq('flagOmoc', this.query.flagOmoc)
      }
      let params = {
        queryString: JSON.stringify(wrapper.queryConditions),
        currentPage: this.tablePage.currentPage,
        rowsPerPage: this.tablePage.pageSize,
      }
      let resp = await this.$ajax.get(this.propUrl, {params})
      this.rows = resp.data
      this.tablePage.total = +resp.count
      //this.tablePage.currentPage = 1
    },
    resetWrapper() {
      this.query.matrName = ''
      this.query.flowStatus = 'end'
      this.query.mergeId = ''
      this.query.supplierId = this.propSupplierId
      this.query.flagOmoc = this.propOmoc
      this.fetchData()
    },
    confirmCheck() {
      this.selectedRows = this.$refs.dataTable.getCheckboxRecords()
      this.$emit('confirm-check', this.selectedRows)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
